<template>
	<view class="waterfall-box">
		<view class="waterfall-main" v-if="custom">
			<slot name="list" :leftList="leftList" :rightList="rightList"></slot>
		</view>
		<view class="waterfall-main" v-else>
			<view class="goods-list-content" v-if="!isEmpty">
				<view class="goods-content-left">
					<view class="good-card" v-for="item in leftList" :key="item.id" @click="toDetail(item.id)">
						<image :src="item.cover" mode="aspectFit" class="good-card-img" lazy-load :style="{height:item.showHeight + 'px'}">
						</image>
						<view class="good-card-info">
							<view class="good-card-tag">{{item.goods_cate_name}}</view>
							<view class="good-card-name">{{item.name}}</view>
							<view class="good-card-price"><text class="price-uni">￥</text>{{item.price}}
							</view>
						</view>
					</view>
				</view>
				<view class="goods-content-right">
					<view class="good-card" v-for="item in rightList" :key="item.id" @click="toDetail(item.id)">
						<image :src="item.cover" mode="aspectFit" class="good-card-img" lazy-load :style="{height:item.showHeight + 'px'}">
						</image>
						<view class="good-card-info">
							<view class="good-card-tag">{{item.goods_cate_name}}</view>
							<view class="good-card-name">{{item.name}}</view>
							<view class="good-card-price"><text class="price-uni">￥</text>{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import loadMore from "@/components/site/load-more.vue"
	export default {
		name: "waterfall",
		components: {
			loadMore
		},
		data() {
			return {
				itemWidth: 0,
				infoHeight: 80,
				baseUrl: 'https://ainterior.space:8005/',
				heightComputedList: [0, 0],
				leftList: [],
				rightList: []
			};
		},
		props: {
			/**
			 * dataList 列表源数据 
			 * page 当前分页 重置判断条件
			 * colummn 列数 需要几列数据
			 * custom 是否自定义样式
			 * loadStatus 列表底部状态
			 * */
			dataList: {
				type: Array,
				default () {
					return []
				}
			},
			page: {
				type: Number,
				default: 1
			},
			colummn: {
				type: Number,
				default: 2
			},
			custom: {
				type: Boolean,
				default: false
			},
			loadStatus: {
				type: String,
				default: 'loadend'
			}
		},
		watch: {
			dataList: {
				immediate: true,
				handler: async function(newV, oldV) {
					if (newV.length) {
						if(!this.itemWidth){
							let height = await this.getwidth()
							this.initList()
							return
						}
						this.initList()
					} else {
						this.resetList()
					}

				}
			},
			page(newV, old) {
				if (newV == 1 && old !== 1) {
					this.resetList()
				}
			},
			colummn(newV) {
				this.heightComputedList = new Array(newV).fill(0)
			}
		},
		computed: {
			isEmpty() {
				let {dataList,loadStatus} = this.$props
				return loadStatus=='loading'? false : dataList?.length <= 0
			}
		},
		methods: {
			getwidth() {
				let _this = this
				return new Promise((resolve, reject) => {
					_this.$nextTick(()=>{
						const query = uni.createSelectorQuery().in(this);
						query.select('.goods-content-left').boundingClientRect(data => {
							if (data) {
								// data.width 就是元素的宽度
								this.itemWidth = (data.width).toFixed(2)
								resolve(true)
							}
						}).exec();
					})
				})
			},
			toDetail(goods_id) {
				this.$com.navTo('/pages/mall/goods/detail/detail', false, {
					goods_id
				})
			},
			getSortList() {
				return new Promise((resolve, reject) => {
					try {
						let dataList = [...this.$props.dataList]
						let oldList = [...this.leftList, ...this.rightList]
						if (this.$props.page == 1) {
							oldList = []
						}
						let sortList = dataList.filter((item) => oldList.findIndex(old => old.id == item
							.id) == -1)
						resolve(sortList)
					} catch (error) {
						resolve([])
					}
				})
			},
			async initList() {
				let sortList = await this.getSortList()
				this.initItem(sortList)
			},
			resetList() {
				this.leftList = []
				this.rightList = []
				this.heightComputedList = new Array(this.$props.colummn).fill(0)
			},
			initItem(originList) {
				let heightSortList = [...this.heightComputedList]
				originList.forEach(async (item, index) => {
					let img = item.filesize
					// 最小高度
					let minHeight = Math.min(...heightSortList) * 1
					// 最小高度位置索引
					let heightIndex = heightSortList.findIndex(findItem => findItem ==
						minHeight)
					// 根据高度规划存储列表
					let radio = (img.width*1 / img.height*1).toFixed(2)
					item['showHeight'] = ( this.itemWidth * 1 / radio ).toFixed(2)
					if ((heightIndex + 1) % 2 == 0) {
						this.rightList.push(item)
					} else {
						this.leftList.push(item)
					}
					heightSortList[heightIndex] = (minHeight + (img?.height * 1 || 100)).toFixed(2) * 1
				})
				this.heightComputedList = heightSortList
			}
		}
	}
</script>

<style>
	.waterfall-box {
		width: 100%;
	}

	.goods-list-content {
		display: flex;
		justify-content: space-between;
	}

	.goods-list-empty {
		position: relative;
	}

	.goods-list-content>view {
		width: calc(50% - 10rpx);
	}

	.good-card {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: white;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		overflow: hidden;
	}

	.good-card-img {
		width: 100%;
	}

	.good-card-info {
		padding: 20rpx;
	}

	.good-card-tag {
		color: #8a8a8a;
	}

	.good-card-name {
		font-weight: 400;
		height: 70rpx;
		font-size: 28rpx;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 20rpx 0 20rpx;
	}

	.good-card-price {
		font-weight: bold;
		font-size: 30rpx
	}

	.price-uni {
		font-size: 24rpx
	}
</style>